<template>
  <view class="wallet">
    <view class="bgImg"></view>
    <view class="wallet-header">
      <u-icon name="arrow-left" size="32rpx" color="#fff" @click="onbackPage"></u-icon>
      <view class="header-title">我的钱包</view>
      <view class="header-table">交易记录</view>
    </view>
    <view class="wallet-main">
      <view class="wallet-nav">
        <view class="wallet-title">我的金币</view>
        <view class="wallet-num">12587542</view>
        <view class="wallet-line"></view>
        <view class="wallet-price">
          <view class="price-withdrawal">可提现：12555</view>
          <view class="price-btn">
            <u-button text="去提现" color="linear-gradient(to left, #B3822D 0%, #E1D47A 100%)" shape="circle"
              style="height: 56rpx;" @click="onWithdrawal"></u-button>
          </view>
        </view>
      </view>
    </view>
    <view class="wallet-purchase">
      <view class="purchase-title">请选择充值数量</view>
      <view class="purchase-num">
        <view :class="index === speciesType ? 'purchase-active':'purchase-list' " v-for="item,index in priceList"
          :key="index" @click="purchaseChange(item,index)">
          <image src="@/static/icon/wallet/species.png" mode=""></image>
          {{item.num}}
        </view>
      </view>
      <view class="purchase-custom">
        <image src="@/static/icon/wallet/species.png" mode=""></image>
        <u--input placeholder="请输入充值数量" type="number" border="none" v-model="paymentNum" @input="numChange"
          @focus="inputFocus"></u--input>
      </view>
      <view class="purchase-way">支付方式</view>
      <view class="way-list">
        <radio-group class="radio">
          <view class="radio-list" v-for="item,index in paymentList" :key="index" @click="radioChange(item.type)">
            <image :src="item.img" mode=""></image>
            <view class="radio-text">{{item.name}}</view>
            <radio :value="item.type" :checked="item.type === current" />
          </view>
        </radio-group>
      </view>
      <u-button text="充值" color="linear-gradient(to left, #2F7EFC 0%, #5CBEFF 100%)" :loading="paymentLoading"
        throttleTime="1500" @click="onPayment"></u-button>
    </view>
  </view>
</template>

<script>
  import request from '@/http/index.js'
  export default {
    name: 'WalletPage',
    data() {
      return {
        priceList: [{
          num: 10
        }, {
          num: 50
        }, {
          num: 100
        }, {
          num: 200
        }, {
          num: 500
        }, {
          num: 1000
        }],
        paymentNum: '',
        moneyNum: '', //充值金额
        speciesType: '',
        paymentList: [{
          img: '../../static/icon/wallet/zfb.png',
          name: '支付宝支付',
          type: '1'
        }, {
          img: '../../static/icon/wallet/wx.png',
          name: '微信支付',
          type: '2'
        }],
        current: '', //支付方式
        paymentLoading: false
      };
    },
    methods: {
      onbackPage() {
        uni.navigateBack(-1)
      },
      purchaseChange(item, index) {
        this.moneyNum = item.num
        this.speciesType = index
      },
      inputFocus() {
        this.speciesType = ''
        this.moneyNum = ''
      },
      numChange() {
        const arr = this.paymentNum.split('.')
        if (arr[1] && arr[1].length > 2) {
          arr[1] = arr[1].slice(0, 2)
        }
        const reg = /^-?\d{1,3}(,\d{3})*(\.\d{1,2})?$/
        const num = arr.join('.')
        this.paymentNum = num
        this.moneyNum = num
      },
      radioChange(index) {
        this.current = index
      },
      //提现
      onWithdrawal() {

      },
      //充值
      async onPayment() {
        if (!this.moneyNum) {
          uni.showToast({
            title: '请选择充值数量',
            icon: 'none'
          })
          return
        } else if (!this.current) {
          uni.showToast({
            title: '请选择支付方式',
            icon: 'none'
          })
          return
        } else {
          this.paymentLoading = true
          const res = await request({
            url: '/api/test/pay',
            method: 'GET',
          })
          console.log(res, 3222222);
          const that_ = this
          // const orderInfo = {
          //   "app_id": res.data.app_id,
          //   "method": res.data.method,
          //   "format": res.data.format,
          //   "charset": res.data.charset,
          //   "sign_type": res.data.sign_type,
          //   "version": res.data.version,
          //   "return_url": res.data.return_url,
          //   "notify_url": res.data.notify_url,
          //   "timestamp": res.data.timestamp,
          //   "sign": res.data.sign,
          //   "biz_content": res.data.biz_content
          // }
          // const orderInfo = `app_id=${res.data.app_id}&method=${res.data.method}&format=JSON&charset=UTF-8&sign_type=RSA2&version=1.0&return_url={res.data.app_id}&notify_url=${res.data.notify_url}&timestamp=${res.data.timestamp}&sign=${res.data.sign}&biz_content=${res.data.biz_content}`

          console.log(res.data, 2222222222);
          uni.requestPayment({
            provider: 'alipay',
            orderInfo: res.data,
            success(res) {
              console.log(res, 111);
              that_.paymentLoading = false
            },
            fail(err) {
              console.log(err, 222);
              that_.paymentLoading = false
            }
          })


          // uni.getProvider({
          // 	service: 'payment',
          // 	success: function (res) {
          // 		console.log(res.provider)
          //     uni.requestPayment({
          //       provider:'wxpay',
          //       orderInfo:'orderinfo',
          //       success(res) {
          //         console.log(res,111);
          //       },fail(err) {
          //         console.log(err,222);
          //       }
          //     })
          // 	}
          // });
          console.log(this.moneyNum, this.current, 9999999);
        }
      }
    },
  };
</script>

<style lang="less" scoped>
  .wallet {
    padding-top: var(--status-bar-height);
    position: relative;

    .wallet-header {
      width: 100%;
      height: 104rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 14rpx 0 40rpx;
      position: sticky;
      z-index: 1;

      .header-title {
        flex: 1;
        text-align: center;
        font-size: 32rpx;
        font-weight: 500;
        color: #FFFFFF;
      }

      .header-table {
        font-size: 28rpx;
        font-weight: 500;
        color: #FFFFFF;
      }
    }

    .wallet-main {
      box-sizing: border-box;
      padding: 30rpx 30rpx 0 30rpx;
      position: sticky;
      z-index: 1;
      border-radius: 16rpx;
      overflow: hidden;
      background: url(@/static/img/wallet/wallet.png) no-repeat;
      background-size: cover;

      .wallet-nav {
        padding: 24rpx;
        box-sizing: border-box;
        border-radius: 16rpx;
        overflow: hidden;

        .wallet-title {
          font-size: 32rpx;
          font-weight: 500;
          color: #FFF0BE;
        }

        .wallet-num {
          margin-top: 20rpx;
          font-size: 48rpx;
          font-weight: 500;
          line-height: 58rpx;
          color: #FFF0BE;
        }

        .wallet-line {
          width: 100%;
          border: 2rpx solid #FFF0BE;
          margin-top: 30rpx;
        }

        .wallet-price {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 20rpx;

          .price-withdrawal {
            font-size: 28rpx;
            font-weight: 500;
            color: #FFF0BE;
          }

          .price-btn {
            width: 164rpx;
            height: 56rpx;
          }
        }
      }
    }

    .wallet-purchase {
      width: 690rpx;
      height: 750rpx;
      background: rgba(255, 255, 255);
      box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
      border-radius: 20rpx;
      margin: 0 auto;
      margin-top: 30rpx;
      box-sizing: border-box;
      padding: 30rpx;

      .purchase-title {
        font-size: 30rpx;
        font-weight: 500;
        color: #3B3B3B;
      }

      .purchase-num {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .purchase-active {
          width: 200rpx;
          height: 82rpx;
          background: rgba(49, 146, 255, 0.05);
          border: 1px solid #3192FF;
          border-radius: 10rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 32rpx;
          font-weight: 500;
          color: #3192FF;
          margin-top: 20rpx;

          image {
            height: 46rpx;
            width: 46rpx;
            margin-right: 12rpx;
          }
        }

        .purchase-list {
          width: 200rpx;
          height: 82rpx;
          background: #fff;
          border: 1px solid #D6D6D6;
          border-radius: 10rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 32rpx;
          font-weight: 500;
          color: #4B4B4B;
          margin-top: 20rpx;

          image {
            height: 46rpx;
            width: 46rpx;
            margin-right: 12rpx;
          }
        }
      }

      .purchase-custom {
        width: 100%;
        height: 82rpx;
        background: #fff;
        border: 1px solid #D6D6D6;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        margin-top: 20rpx;

        image {
          height: 46rpx;
          width: 46rpx;
          margin: 0 12rpx 0 20rpx;
        }
      }

      .purchase-way {
        font-size: 24rpx;
        font-weight: 500;
        line-height: 34rpx;
        color: #3B3B3B;
        margin: 34rpx 0 0 24rpx;
      }

      .way-list {
        margin: 10rpx 0 22rpx 0;
        box-sizing: border-box;
        padding: 0 24rpx;

        .radio {


          .radio-list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 88rpx;
            line-height: 88rpx;

            image {
              height: 48rpx;
              width: 48rpx;
            }

            .radio-text {
              flex: 1;
              margin-left: 20rpx;
            }
          }
        }
      }

      // .purchase-btn {
      //   width: 640rpx;
      //   height: 66rpx;
      //   background: linear-gradient(270deg, #2F7EFC 0%, #5CBEFF 100%);
      //   border-radius: 20rpx;
      //   font-size: 32rpx;
      //   font-weight: 500;
      //   line-height: 66rpx;
      //   color: #FFFFFF;
      //   margin-top: 22rpx;
      // }
    }
  }

  .bgImg {
    width: 100%;
    height: 334rpx;
    background: rgba(47, 126, 252);
    position: absolute;
    top: 0;
    left: 0;
  }
</style>